<template>
	<view v-if="data" :class="$attrs" class="px-12 py-16 bg-white fs-14 text-color-regular" @click="toOrderDetail">
		<view class="flex justify-between item-center">
			<view class="flex-col">
				<view class="font-normal fs-12">订单编号：{{data.orderNo}}</view>
				<view class="mt-4 fs-12" style="color:rgba(0, 0, 0, 0.3);">下单时间：{{data.orderTime}}</view>
			</view>
			<view class="text-bold" :style="`color:${currentOrderState.color}`">{{currentOrderState.text}}</view>
		</view>
		<view class="h-1 bg-default mt-8 mb-16"></view>
		<view class="flex">
			<view class="relative mr-12 flex-shrink">
				<image class="radius-8" style="width:80px;height:80px;" :src="coverPicture"></image>
			</view>
			<view class="flex-1 w-0">
				<view class="text-bold">{{data.activeTitle}}</view>
			</view>
		</view>
		<view class="mt-8 flex justify-between">
			<view>下单人：{{data.orderNickName}}</view>
			<view class="h-25 text-right">
				<text class="fs-12" style="font-weight:500;">共{{data.orderNum}}件，</text>
				<text class="c3 fs-16 text-bold">支付{{(data.payPrice)}}积分</text>
			</view>
		</view>
		<view class="h-1 bg-default mt-16 mb-12"></view>
		<view class="flex justify-end item-center">
			<view class="flex">
				<view class="h-26 inline-flex center c3 fs-12 radius-8 ml-8" style="width:80px;border: 1px solid #333;" @click.stop="toOrderDetail">订单详情</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref, watchEffect } from 'vue'
	import { orderToPay, cancelOrderApi } from '@/api/order.js'
	import { useOrder } from '@/hooks/useOrder.js'
	import { numberFormat } from '@/utils/index.js'
	import { useUserStore } from '@/stores/modules/user.js'
	
	const userStore = useUserStore()
	
	const props = defineProps({
		// 查看的订单类型：1 我购买的订单；2 我卖出的订单；3 我分销的订单；
		viewOrderType: {
			type: Number
		},
		data: {
			type: Object,
			required: true
		}
	})
	
	const emits = defineEmits(['onOrderUdate'])
	
	const { isSignUp, coverPicture, updateOrderInfo } = useOrder()
	
	watchEffect(() => {
		updateOrderInfo(props.data)
	})
	
	const orderStateDict = {
		1: {
			text: '待支付',
			color: '#FA4543'
		},
		2: {
			text: '待核销',
			color: '#FCB513'
		},
		3: {
			text: '核销中',
			color: '#FA4543'
		},
		4: {
			text: '已取消',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		5: {
			text: '已完成',
			color: '#16BE62'
		},
		6: {
			text: '已关闭',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		7: {
			text: '已核销',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		8: {
			text: '支付中',
			color: '#FA4543'
		},
		9: {
			text: '待审核',
			color: 'rgba(51, 51, 51, 0.60)'
		},
		10: {
			text: '待成团',
			color: 'rgba(51, 51, 51, 0.60)'
		},
	}
	
	const currentOrderState = computed(() => {
		if (props.data) {
			if (props.viewOrderType === 1 && props.data.orderState === 4 && '票付通出票失败' === props.data.orderNote) {
				return {
					text: '库存不足,已取消',
					color: 'rgba(51, 51, 51, 0.60)'
				}
			} else {
				return orderStateDict[props.data.orderState] || {}
			}
		}
		return {}
	})
	
	const toOrderDetail = () => {
		if (props.viewOrderType === 1 && props.data.orderState === 1) {
			toOrderPay(true)
		} else {
			uni.navigateTo({
				url: `/pagesF/order/detail?id=${props.data.id}`,
				events: {
					onRefresh() {
						emits('onOrderUdate')
					}
				}
			})
		}
	}
	
	// 报名活动详情
	const toActivityDetail = () => {
		uni.navigateTo({
			url: `/pagesA/order/activity-detail?id=${props.data.id}`
		})
	}
	
	const cancelOrder = () => {
		uni.showModal({
			content: '确定取消？',
			success: (res) => {
				if (res.confirm) {
					cancelOrderApi({orderId: props.data.id}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '已取消'
						})
						emits('onOrderUdate')
					})
				}
			}
		})
	}
	
	const toOrderPay = (update) => {
		orderToPay({orderNo:props.data.orderNo}).then(res =>{
			uni.navigateTo({
				url: `/pagesA/order/wait-pay?id=${props.data.id}`,
				events: {
					onRefresh() {
						if(update){
							emits('onOrderUdate')
						}
					}
				}
			})
		}).catch(err => {
			uni.showToast({
				icon:"none",
				title:err.message
			})
		})
		
	}
	
	const inviteReturnMsg = computed(() => {
		let str = props.data.inviteReturnMsg
		const regex = /\d+/g
		str = str.replace(/(\d*\.?\d+)/g, function(match, val, index) {
			if (index > 2) {
				return `<span class="color-primary fs-16 font-semibold">${match}</span>`
			} else {
				return `<span class="color-primary fs-16">${match}</span>`
			}
		})
		return str
	})
	
	const toInvite = () => {
		uni.$emit('showSharePopup', {
			type: 'activity',
			payload: {
				id: props.data.activeId
			}
		})
	}
</script>
